<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts" style="width: 100%; height: 100%" :width="width" :height="height" :option="option" :type="type" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref } from "vue";
import echartsDom from "./echartsDom.vue";
import { queryConsumeChartForFutureDay } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  type: {
    type: String,
    default: ""
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);

const getoptions = () => {
  queryConsumeChartForFutureDay({ dictKey: "WCI01", day: 7 }).then((response: any) => {
    console.log(response);
    console.log(response.panelList.filter(item => item.title == "LSR用水量")[0].details.map(item => (item.value != null ? item.value : 0)));
    isShowEcharts.value = true;
    option.value = {
      backgroundColor: props.type == "dark" ? "#001e3b" : "",
      color: ["#6035CE", "#FF4355", "#FABF2B"],
      grid: {
        left: "10px",
        top: "50px",
        right: "0px",
        bottom: "10px",
        containLabel: true
      },
      legend: {
        data: ["WWT排水量", "WWT排水量预测"]
      },
      tooltip: {
        confine: true,
        trigger: "axis"
      },
      xAxis: {
        type: "category",
        boundarGap: false,
        data: response.xaxis
      },
      yAxis: {
        name: "水量 (m3)",
        type: "value"
      },
      series: [
        {
          name: "WWT排水量",
          data: response.panelList.filter(item => item.title == "WWT排水量")[0].details.map(item => (item.value != null ? item.value : 0))
            ? response.panelList.filter(item => item.title == "WWT排水量")[0].details.map(item => (item.value != null ? item.value : 0))
            : [0, 0, 0, 0, 0, 0, 0],
          type: "line"
        },
        {
          name: "WWT排水量预测",
          data: response.panelList.filter(item => item.title == "WWT排水量")[0].future.map(item => (item.value != null ? item.value : 0))
            ? [
                null,
                null,
                null,
                null,
                null,
                null,
                null,
                ...response.panelList.filter(item => item.title == "WWT排水量")[0].future.map(item => (item.value != null ? item.value : 0))
              ]
            : [null, null, null, null, null, null, null, 0, 0, 0],
          type: "line"
        }
      ]
    };
  });
};
getoptions();
</script>

<style scoped lang="scss">
.parent {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.topIcon {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 20px;
  cursor: pointer;
}

.linediv {
  position: relative;
  float: left;
  width: 23px;
  height: 17px;
  margin-right: 10px;

  .line {
    position: absolute;
    top: 8px;
    width: 100%;
    height: 1px;
    background: #3b82f6;
  }

  .yuan {
    position: absolute;
    top: 6px;
    left: 9px;
    width: 5px;
    height: 5px;
    background: #3b82f6;
    border-radius: 50%;
  }
}
</style>
